<template>
  <div class="Order">
    <!-- 导航栏 -->
    <!-- {{orderData}} -->
    <div class="nav_bar">
      <van-nav-bar title="订单" />
    </div>
    <!-- 订单选择栏 -->
    <van-tabs v-model="active" swipeable @click="onClick">
      <van-tab
        v-for="(order, index) in orderStatus"
        :key="index"
        :title="order"
      >
      </van-tab>
    </van-tabs>
    <!-- 订单是否有数据 -->
    <div v-if="orderData.length == 0">
          <van-empty description="暂无数据" />
    </div>
    <!-- 订单信息栏 -->
    <div style="padding: 10px 0em">
      <!-- 订单内容区域 -->
      <div class="order">
        <!-- 订单的详情内容 -->
        <div class="order_details">
          <div class="order_item" v-for="order in orderData" :key="order.id" @click="routeOrder(order)"> 
            <div class="flex_item1">
              <img :src="order.customer.userFace" alt="" />
            </div>
            <div class="flex_item2">
              <span class="name">{{order.customer.username}}</span>
              <span class="status">{{order.status}}</span>
              <p class="address">{{order.address.province}} {{order.address.city}} {{order.address.area}} {{order.address.address}}</p>
              <div class="date_pirce">
                <div class="date">{{order.orderTime | dateFormat}}</div>
                <div class="price">¥{{order.total}}</div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination" v-if="orderData.length != 0" >
      <van-pagination  v-model="obj.page" :total-items="orderList.total" :items-per-page="obj.pageSize" @change="onchange" />
    </div>
    <!-- 向上顶空间 -->
    <div style="height:100px"></div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { get } from "@/http/axios";
export default {
  data() {
    return {
      // 订单选择栏的内容
      orderStatus: ["全部订单", "待派单", "待接单", "待确认", "已完成"],
      //订单栏初始选择
      active: 0,
      obj: {
        page: 1,
        pageSize: 6,
      },
      title:'',
      orderData:[],
      orderList:{},
    };
  },

  methods: {
    //选择的顾客id
    ...mapActions("user", ["getUserInfo"]),
    //订单选择栏的状态
    onClick(name, title) {
      // console.log(name, title);
      this.title = title
      let data = {
        page: this.obj.page,
        pageSize: this.obj.pageSize,
        customerId: this.userInfo.id,
        status: title,
      };
      if (title != "全部订单") {
        this.obj.status = title;
        //添加顾客id
        this.customerId = this.userInfo.id;
        //切换到其他页面是否默认归一
        this.obj.page = 1
        this.getAllOrder(this.obj);
      } else {
        //当时全部订单的时候删除status
        for (const key in this.obj) {
          if (key == "status") {
              //切换到其他页面是否默认归一
            this.obj.page = 1
            delete this.obj[key];
          }
        }
        //添加顾客id
        this.obj.customerId = this.userInfo.id;
        this.getAllOrder(this.obj);
      }
      // console.log(data);
    },
    //获取订单全部内容
    async getAllOrder(obj) {
      //添加顾客id参数
      this.obj.customerId = this.userInfo.id;
      let res = await get("/order/pageQuery", obj);
      // console.log(res.data.data.list);
      this.orderList = res.data.data
      this.orderData = res.data.data.list
    },
    routeOrder(val) {
      this.$router.push({
        path: "orderDetails",
        query: {
          details: val,
        },
      })
    },
    onchange(value){
      this.obj.page = value
      this.obj.customerId = this.userInfo.id
      if(this.title != '全部订单' && this.active != 0)
      {
          this.obj.status = this.title
      }else{
          for (const key in this.obj) {
          if (key == "status") {
            delete this.obj[key];
          }
      }
    }
      // console.log(this.obj)
      this.getAllOrder(this.obj)
      
    }

  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  created() {
    this.getUserInfo().then(() => {
      this.getAllOrder(this.obj);
    });
    // console.log(this.obj)
  },
};
</script>

<style >
body
{
  background: #f7f8fa;
}
.van-pagination__item
{
  color: #ee0a24;
}
.van-pagination__item--active{
  background: #ee0a24;
  color: white;
}
.van-pagination__item:active {
  background: #ee0a24;
}
.order_details
{
  width: 100%;
}
.order_item {
  width: 90%;
  height: 87px;
  margin: 8px auto;
  display: flex;
  background: white;
  padding: 10px 10px;
}
.flex_item1 {
  width: 80px;
  height: 80px;
  background-color: #9002bf;
  border-radius: 50%;
}
.flex_item1 img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.flex_item2 {
  margin-left: 1em;
  flex: 2;
  height: 80px;
}
.status {
  float: right;
  font-size: 11px;
  color: #f8825d;
}
.address {
  font-size: 12px;
  margin-top: 1em;
  color: #666;
}
.date_pirce {
  margin-top: 0.5em;
  font-size: 12px;
}
.date {
  float: left;
}
.price {
  float: right;
  text-align: right;
}
</style>